<template>
  <view class="page">
    <view class="info">
      <view class="header">
        <!--				兼职标题-->
        <view class="title">{{ details.recruitmentTitle }}</view>
        <!--				兼职价格-->
        <view class="price">{{ details.recruitmentPrice }}</view>
      </view>
      <view class="place-people-number">
        <!--				地址-->
        <view class="item">
          <image class="icon" :src="locationIcon"></image>
          <view class="text">{{ details.recruitmentAddress }}</view>
        </view>
        <!--				人数-->
        <view class="item">
          <image class="icon" :src="peopleIcon"></image>
          <view class="text">{{ details.recruitmentNum }}人</view>
        </view>
      </view>
      <!--			招募状态-->
      <!--			停止招聘-->
      <view class="forbidden status" v-if="isForbidden">
        <image class="icon" :src="forbiddenIcon"></image>
        <view class="text">该职位已招满，可查看其他</view>
      </view>
      <!--			急招-->
      <view class="urgent status" v-else-if="details.isWanted === 1">
        <image class="icon" :src="lighteningIcon"></image>
        <view class="text">该职位为急聘职位</view>
      </view>

      <view class="meta-data">
        <view class="item">{{ `工作周期：${details.workCycle}` }}</view>
        <view class="item">{{ `每周工期：${details.weekDuration}` }}</view>
        <view class="item">{{ `工作时间：${details.workTime}` }}</view>
        <view class="item">{{ `工作时段：${details.workTimeSlot}` }}</view>
        <view class="item">{{ `结算方式：${details.settlementWay}` }}</view>
        <image class="icon" :src="moneyPacketIcon" mode="widthFix"></image>
      </view>
    </view>

    <view class="divide-line"></view>

    <view class="introduce">
      <view class="title">
        <view class="point"></view>
        <view class="text">职位描述</view>
      </view>
      <!--			标签列表-->
      <view class="label-list">
        <view class="label-item" v-for="item in details.recruitmentTagsList" :key="item">{{ item }}</view>
      </view>
      <!--			招聘内容富文本-->
      <view class="recruit-content" v-if="!valIsEmpty(details.recruitmentContent)">
        <view v-html="details.recruitmentContent"></view>
      </view>
      <!--			招聘海报-->
      <image class="poster" :src="getShowImage(details.recruitmentPoster)" mode="widthFix" :show-menu-by-longpress="true"></image>
    </view>

    <view class="join-btn" v-if="!isForbidden" @click="goToSignUp">前往报名</view>

    <contractKeFu ref="contractKeFu"></contractKeFu>
    <inputInformationPrompt
      ref="inputInformationPrompt"
      :details="details"
      @join-work-study-program="() => (directlyShowKefuPopup = true)"
    ></inputInformationPrompt>
    <!--		邀请有礼活动图标-->
    <image
      class="rewarding-invitation-icon"
      :src="getShowNginxPicUrl('cJvH7jbWAtkjvrx67osa.png')"
      @click="() => $uni.navigateTo({ url: '/markingCampaign/pages/partTimeJobRecruit/rewardingInvitations/index' })"
    ></image>
  </view>
</template>

<script>
import request from "@/utils/request"
import { getShowImage, valIsEmpty } from "@/utils"
import urlUtils from "@/utils/urlUtils"
import locationIcon from "./assets/location.png"
import peopleIcon from "./assets/people.png"
import moneyPacketIcon from "./assets/money-packet.png"
import lighteningIcon from "./assets/lightening.png"
import forbiddenIcon from "./assets/forbidden.png"
import contractKeFu from "@/components/contractKeFu/index.vue"
import inputInformationPrompt from "./components/inputInformationPrompt.vue"
import { getShowNginxPicUrl } from "@/utils/settings"

export default {
  computed: {
    // 是否禁止报名
    isForbidden() {
      if (this.details.isWanted === 2 || this.details.recruitmentStatus === "Ended") {
        return true
      } else {
        return false
      }
    },
  },
  components: { contractKeFu, inputInformationPrompt },
  data() {
    return {
      locationIcon,
      peopleIcon,
      moneyPacketIcon,
      lighteningIcon,
      forbiddenIcon,
      recruitmentId: "",
      details: {
        recruitmentId: 0,
        recruitmentLogo: "",
        recruitmentTitle: "",
        recruitmentDescription: "",
        recruitmentPoster: "",
        recruitmentShow: 0,
        contactQrcode: "",
        publishTime: "",
        recruitmentStatus: "",
        createdTime: "",
        recruitmentTagsList: [],
        isWanted: 0,
        recruitmentPrice: "",
        recruitmentNum: 0,
        recruitmentAddress: "",
        workCycle: "",
        weekDuration: "",
        workTime: "",
        workTimeSlot: "",
        settlementWay: "",
        recruitmentContent: "",
      },
      directlyShowKefuPopup: false, // 是否在页面显示时直接显示客服二维码（从其他页面返回回来的时候可能会用到）
    }
  },
  onLoad(query) {
    this.recruitmentId = query.recruitmentId
    this.getDetails()
  },
  onShow() {
    if (this.directlyShowKefuPopup) {
      this.directlyShowKefuPopup = false
      this.goToSignUp()
    }
  },
  methods: {
    getShowNginxPicUrl,
    valIsEmpty,
    getShowImage,
    getDetails() {
      request({
        url: "recruitment/getDetail",
        data: {
          recruitmentId: this.recruitmentId,
        },
        errorHandle: true,
        showLoading: true,
      }).then((data) => {
        this.details = data
        // 动态设置页面标题
        uni.setNavigationBarTitle({
          title: data.recruitmentTitle,
        })
      })
    },
    // 前往报名
    async goToSignUp() {
      // 检查是否有录入信息
      const res = await request({
        url: "recruitmentUserinfo/getRecruitmentUserinfo",
        errorHandle: true,
        showLoading: true,
      })
      // 录入了弹出客服二维码
      if (res) {
        this.$refs.contractKeFu.open()
        // 还未录入引导用户去录入
      } else {
        this.$refs.inputInformationPrompt.open()
      }
    },
  },
  //右上角分享
  onShareAppMessage() {
    return {
      title: this.details.recruitmentTitle,
      imageUrl: this.getShowImage(this.details.recruitmentPoster),
      path: urlUtils.getCurrentPageUrl(),
    }
  },
}
</script>

<style scoped lang="scss">
.page {
  padding: {
    left: 30rpx;
    right: 30rpx;
    top: 30rpx;
    bottom: 20vh;
  }
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(248, 253, 237, 1) 0%, rgba(255, 255, 255, 1) 40vh, rgba(255, 255, 255, 1) 100%);
  > .info {
    background: var(--background-color);
    box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    padding: 30rpx;
    > .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > .title {
        font-size: 34rpx;
        font-weight: bold;
      }
      > .price {
        font-size: 32rpx;
        color: #ff6219;
      }
    }
    > .place-people-number {
      display: flex;
      margin-top: 20rpx;
      > .item {
        margin-right: 50rpx;
        display: flex;
        align-items: center;
        > .icon {
          width: 30rpx;
          height: 30rpx;
        }
        > .text {
          margin-left: 6rpx;
          font-size: 30rpx;
          color: #8a8585;
        }
      }
    }
    > .status {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      padding: 16rpx 24rpx;
      border-radius: 10rpx;
      &.urgent {
        background: linear-gradient(90deg, rgba(255, 117, 100, 1) 0%, rgba(253, 209, 209, 1) 100%);
      }
      &.forbidden {
        background: linear-gradient(90deg, rgba(102, 96, 96, 1) 0%, rgba(186, 184, 184, 1) 100%);
      }
      > .icon {
        width: 50rpx;
        height: 50rpx;
      }
      > .text {
        margin-left: 4rpx;
        font-size: 30rpx;
        color: #fff;
      }
    }
    > .meta-data {
      margin-top: 30rpx;
      background: linear-gradient(88.58deg, rgba(161, 154, 154, 0.13) 0.7%, rgba(180, 175, 175, 0.16) 99.32%);
      border-radius: 10rpx;
      position: relative;
      padding: 20rpx 30rpx;
      color: #666060;
      font-size: 30rpx;
      > .item:not(:last-child) {
        margin-bottom: 10rpx;
      }
      > .icon {
        position: absolute;
        width: 116rpx;
        max-height: 116rpx;
        bottom: 0;
        right: 32rpx;
      }
    }
  }
  //> .poster {
  //  width: 100%;
  //}
  > .divide-line {
    margin: 40rpx 30rpx;
    height: 2rpx;
    background: rgba(0, 0, 0, 0.1);
  }
  > .introduce {
    padding: 0 30rpx;
    > .title {
      display: flex;
      align-items: center;
      > .point {
        background: #54bd81;
        width: 10rpx;
        height: 32rpx;
      }
      > .text {
        line-height: 1;
        font-size: 32rpx;
        font-weight: bold;
        margin-left: 20rpx;
      }
    }
    > .label-list {
      margin-top: 30rpx;
      display: flex;
      > .label-item {
        margin-right: 20rpx;
        padding: 10rpx 20rpx;
        background-color: rgba(102, 102, 102, 0.13);
        border-radius: 10rpx;
        font-size: 26rpx;
        color: #666060;
      }
    }
    > .recruit-content {
      margin-top: 30rpx;
    }
    > .poster {
      width: 100%;
      margin-top: 30rpx;
    }
  }
  > .join-btn {
    position: fixed;
    bottom: calc(40rpx + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 20rpx 120rpx;
    background: linear-gradient(180deg, #fcb454 0%, #fd6711 100%);
    color: #fff;
    font-size: 32rpx;
    border-radius: 41rpx;
    width: max-content;
  }
	> .rewarding-invitation-icon {
		position: fixed;
		right: 30rpx;
		bottom: calc(50rpx + env(safe-area-inset-bottom));
		width: 100rpx;
		height: 100rpx;
	}
}
</style>
